/*
 * @Description:
 * @version: v0.0.1
 * @Author: ZhouYanPing
 * @Date: 2025-04-06 12:01:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-06 12:12:31
 */
import { useNavigate } from 'react-router';
import { useState, useEffect } from '@lynx-js/react';
import { ItemView } from '@/components/ItemView';

export function ListDemo() {
  const nav = useNavigate();
  const [listData, setListData] = useState<number[]>([]);

  useEffect(() => {
    // 初始化数据
    const initialData = Array.from({ length: 20 }, (_, i) => i);
    setListData(initialData);
  }, []);

  const handleLoadMore = () => {
    const newData = [...listData];
    const lastIndex = newData[newData.length - 1];
    const moreData = Array.from({ length: 10 }, (_, i) => lastIndex + i + 1);
    setListData([...newData, ...moreData]);
  };

  return (
    <view className="page-container">
      <view className="header">
        <text className="back" bindtap={() => nav(-1)}>
          ←
        </text>
        <text className="title">列表演示</text>
      </view>

      {listData.length > 0 && (
        <list
          className="list-container"
          list-type="single"
          scroll-orientation="vertical"
          enable-scroll={true}
          scroll-event-throttle={16}
          bindscrolltolower={handleLoadMore}
          style={{
            width: '100%',
            height: 'calc(100vh - 50px)',
            backgroundColor: '#f5f5f5',
          }}
        >
          {listData.map((index) => (
            <list-item key={`item-${index}`} item-key={`item-${index}`}>
              <ItemView index={index} />
            </list-item>
          ))}
        </list>
      )}
    </view>
  );
}
